import React, { useEffect, useState } from "react";
import "./App.scss";
import ImagesView from "./component/imagesView/index";

const App = () => {
  // 控制模态框是否展示
  const [visible, setVisible] = useState(false);
  // 打开
  const openVisible = () => {
    setVisible(true);
  };

  // 关闭
  const closeVisible = () => {
    setVisible(false);
  };

  // 控制滚动条
  useEffect(() => {
    if (visible) {
      document.body.style.overflow = "hidden";
    } else {
      document.body.style.overflow = "auto";
    }
  }, [visible]);

  return (
    <div className="app">
      <div style={{ height: "500px", background: "#aaa333" }}></div>
      <div>
        <img
          src={`https://z3.ax1x.com/2021/06/12/25L70U.jpg`}
          alt=""
          style={{
            width: "200px",
            height: "150px",
            cursor: "pointer",
            margin: "30px 600px"
          }}
          draggable="false"
          onClick={openVisible}
        />
      </div>
      <ImagesView visible={visible} onCancel={closeVisible}>
        <div className="image">
          <img
            src="https://z3.ax1x.com/2021/06/12/25L70U.jpg"
            alt=""
            style={{ width: "1000px" }}
          />
        </div>
      </ImagesView>

      <div
        style={{
          height: "800px",
          background: "#222aaa"
        }}
      ></div>
    </div>
  );
};

export default App;
